<!--
 * @Author: 汪军 624473119@qq.com
 * @Date: 2023-10-10 18:15:53
 * @LastEditors: 汪军 624473119@qq.com
 * @LastEditTime: 2023-10-12 18:17:22
 * @FilePath: \ekee-web\src\views\end\easy-link\EasyLink.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template lang="pug">
.evaluate
  .title.flex.justify-center.bold.mb4 {{ commetDetetail == true ? "评价" : "" }}
  .form-content.flex
    .require.w100
      el-form(
        ref="formRef",
        :model="form",
        :rules="rules",
        label-position="left",
        label-width="100px",
        status-icon
      )
        el-row(:gutter="40")
          el-col(:span="12")
            el-form-item(label="评分：", prop="score")
              el-select(
                v-model="form.score",
                placeholder="请选择",
                clearable,
                @change="scoreListChange",
                :disabled="!commetDetetail"
              )
                el-option(
                  v-for="item in scoreList",
                  :key="item.value",
                  :label="item.name",
                  :value="item.value"
                )
          el-col(:span="6")
            el-form-item(label-width="0px")
              el-rate(
                v-model="form.score",
                :colors="colors",
                @change="scoreChange",
                :disabled="!commetDetetail"
              )
        el-form-item(label="评价理由：", prop="content")
          el-input(
            v-model="form.content",
            type="textarea",
            :autosize="{ minRows: 4, maxRows: 4 }",
            maxlength="200"
            placeholder="请输入",
            clearable,
            :disabled="!commetDetetail"
          )
        el-form-item(label="评价图片：", prop="images")
          el-upload(
            v-if="commenImgList.length == 0"
            :file-list="fileList",
            multiple,
            :show-file-list="true",
            list-type="picture-card",
            action="https://api.ekee.com.cn/api/common/upload",
            :on-success="handleAvatarSuccess",
            :on-remove="handleRemove",
            :before-upload="beforeAvatarUpload",
            :disabled="!commetDetetail"
             limit="9"  
          )
            <el-icon> <Plus /></el-icon>
          .imgList
            <img v-if="commenImgList.length > 0" v-for="item in commenImgList" :src="item" class="avatarIcon"   />

  .flex.justify-center.mt4.mb4(v-if="commetDetetail == true")
    el-button.btn(
      type="primary",
      size="large",
      plain,
      round,
      @click="onCancel(formRef)"
    ) 取消
    el-button.btn(
      type="primary",
      size="large",
      round,
      @click="onConfirm(formRef)"
    ) 确认
  .flex.justify-center.mt4.mb4
</template>

<script setup>
import { onMounted, ref } from "vue";
import { CommentDetail } from "@/api/easymain";

const props = defineProps({
  rowId: "",
  commetDetetail: true,
});
onMounted(() => {
  form.value.order_id = props.rowId;
  commetDetetail.value = props.commetDetetail;
  if (commetDetetail.value == false) {
    getCommentDetail(form.value.order_id);
  }
});

//查看评论
const commenImgList = ref([]);
const getCommentDetail = (id) => {
  CommentDetail({ order_id: id }).then((res) => {
    if (res.code == 1) {
      console.log("查看评论", res.data);
      form.value.content = res.data.content;
      form.value.score = res.data.score;
      commenImgList.value = res.data.images;
      ElMessage({ message: res.msg, type: "success" });
    }
    if (res.code == 0) {
      ElMessage({ message: res.msg, type: "error" });
    }
  });
};
const commetDetetail = ref(true);
const formRef = ref();
const rules = ref({
  score: [{ required: true, message: "请选择评分", trigger: "change" }],
  content: [
    {
      required: true,
      message: "请输入评价理由",
      trigger: "blur",
    },
  ],
  images: [
    {
      required: false,
      message: "请选择图片",
      trigger: "change",
    },
  ],
});
const form = ref({
  order_id: "",
  score: "",
  content: "",
  images: "",
});
const scoreList = ref([
  { value: 1, name: "1" },
  { value: 2, name: "2" },
  { value: 3, name: "3" },
  { value: 4, name: "4" },
  { value: 5, name: "5" },
]);
const scoreListChange = (val) => {
  console.log("val", val);
  form.value.score = val;
};
const scoreChange = (val) => {
  console.log("val", val);
  form.value.score = val;
};
const colors = ref(["#99A9BF", "#F7BA2A", "#FF9900"]);

const emits = defineEmits(["cancel", "confirm"]);
const imgList = ref([]);
//移除
const handleRemove = (file) => {
  imgList.value.forEach((item, index, array) => {
    if (file.name == item.name) {
      array.splice(index, 1);
    }
  });
  console.log("删除", imgList.value);
};
//上传
const handleAvatarSuccess = (response, uploadFile) => {
  console.log("上传", response, uploadFile);
  imgList.value.push({
    name: uploadFile.name,
    path: response.data.fullurl,
  });
};

//- el-upload.avatar-uploader(
//-   :file-list="fileList",
//-   multiple,
//-   :show-file-list="true",
//-   list-type="picture-card",
//-   action="https://api.ekee.com.cn/api/common/upload",
//-   :on-success="handleAvatarSuccess",
//-   :on-remove="handleRemove",
//-   :before-upload="beforeAvatarUpload"
//- )
//-   <img v-if="form.images" :src="form.images" class="avatar" />
//-   el-icon v-else class="avatar-uploader-icon" <Plus />

// 取消
const onCancel = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
  emits("cancel");
};

// 确认
const onConfirm = async (formEl) => {
  if (!formEl) return;
  if(imgList.value.length==0){
    ElMessage({ message:'请上传图片', type: "warning" });
    return;
  }
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log("formData.value.list", imgList.value);
      const fullurl = imgList.value.map((item) => {
        return item.path;
      });
      let fullurlInfo = fullurl.join(",");
      //图片地址
      form.value.images = fullurlInfo;
      console.log("fsdfsdi", form.value);
      emits("confirm", form.value);
    } else {
      console.log("error submit!", fields);
    }
  });
};
</script>

<style lang="stylus" scoped>
.imgList {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  // height: 300px;
  overflow-x: hidden;
  overflow-y: auto;
  margin-top: 15px;
}

.avatarIcon {
  width: 148px;
  height: 148px;
}

.evaluate {
  .title {
    font-size: 24px;
  }

  .form-content {
    padding: 0px 66px;

    .require {
      padding: 16px 12px;
      border: 1px solid #E6E6E6;
    }

    .no-require {
      margin-left: 32px;
      padding: 16px 12px;
      border: 1px solid #E6E6E6;
    }
  }

  .input-width {
    width: 245px;
  }

  .btn {
    width: 178px;
  }

  .overdue {
    color: #E84026;
  }

  .refund {
    color: #2487E8;
  }

  .no-quota {
    margin-top: 200px;
  }

  // 上传图片相关
  .avatar-uploader .el-upload {
    border: 1px dashed #dcdfe6;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: var(--el-transition-duration-fast);
  }

  .avatar-uploader .el-upload:hover {
    border-color: #dcdfe6;
  }

  .el-icon.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 152px;
    height: 100px;
    text-align: center;
    border: 1px dashed #dcdfe6;
  }

  .avatar-uploader .avatar {
    width: 152px;
    height: 100px;
    display: block;
  }
  //:deep(.el-upload--picture-card){
  // position: absolute
  //}
}
</style>
  